<template>
    <div class="detailes">
        <div class="box">
            <mt-swipe :auto="0">
                <mt-swipe-item><img class="c-Img" src="/" alt="图片尚未加载"></mt-swipe-item>
                <mt-swipe-item><img class="c-Img" src="/" alt="图片尚未加载"></mt-swipe-item>
                <mt-swipe-item><img class="c-Img" src="/" alt="图片尚未加载"></mt-swipe-item>
            </mt-swipe>
        </div>
        <!--//商品-->
        <div class="title" >
            <p>{{this.Goodsltem.name}}</p>
            <p>{{this.Goodsltem.introduction}}</p>
            <p>￥<span>{{this.Goodsltem.price}}</span></p>
        </div>
        <!--//发货地址-->
        <div class="d-Deliver">
            <p class="tit">发货:</p>
            <div class="d-price"><span>上海</span>|<span>快递:10.00</span></div>
            <div class="d-num">月销:<span class="D-num">0</span></div>
        </div>
        <!--//活动-->
        <div class="D-activity">
            <p class="tit">活动:</p>
            <div class="d-activity">立即抢购吧</div>
        </div>
        <!--//规格-->
        <div class="detail-opt">
            <p class="tit">颜色:</p>
            <div>
                <ul class="optColor" >
                    <li class="optColorli" v-for="value in dispose">{{value}}</li>
                </ul>
            </div>
        </div>
        <!--//地址-->
        <div class="d-send">
            <p class="tit">送至:</p>
            <div class="D-send">四川省某个市某个县某个卡卡个个</div>
        </div>
        <!--//参数-->
        <div class="parameter">
            <p class="tit">详细参数:</p>
            <div>1</div>
            <div>2</div>
            <div>3</div>
        </div>
        <!--//用户评论//-->
        <div class="evaluate">
            <p class="tit">用户评论:</p>
            <div class="user">
                <div class="user-img">
                    <div></div>
                    <p>用户名称三个字</p>
                </div>
                <div class="user-comment"></div>
            </div>
        </div>
        <!--//底部购物车-->
        <div class="detail-buy">
            <div><span class="iconfont icon-icon-test16"></span><p>收藏</p></div>
            <router-link to="/Shop" class="router-link-active " ><div><span class="iconfont icon-icon-test1"></span><p>购物车</p></div></router-link>
            <div>加入购物车</div>
        </div>
    </div>
</template>
<style lang="less">
    @baseSize:37.5;
    .px2rem(@name,@px){
            @{name}:@px / @baseSize /2* 1rem;
    }
    *{
        margin: 0;
        padding: 0;
        list-style: none;
    }
    body{
        .px2rem(padding-bottom,200);
    }
    a {
        text-decoration: none;
    }

    .router-link-active {
        text-decoration: none;
    }
    //轮播图
    .box{
        .px2rem(width,750);
        .px2rem(height,400);
    }
    //标题,商品名称
    .title p{
        .px2rem(margin-top,10);
        .px2rem(margin-left,15);
    }
    .title p:nth-child(1) {
        .px2rem(font-size,50);
    }
    .title p:nth-child(2) {
        color: #a1a8ae;
    }
    .title p:nth-child(3) {
        .px2rem(font-size,35);
        color: #f94431;
    }
    //发货地址
    .d-Deliver{
        display: flex;
    }
    .d-Deliver div{
        flex: 1;
    }
    .d-price{
        text-align: center;
        .px2rem(font-size,30);
        .px2rem(margin,5);
    }
    .d-num{
        text-align: right;
        .px2rem(font-size,30);
        .px2rem(margin,5);
    }
    .d-price span:nth-child(1){
        .px2rem(margin-right,10);
    }
    .d-price span:nth-child(2){
        .px2rem(margin-left,10);
    }
    .D-num{
        .px2rem(margin-right,50);
    }
    // .d-Deliver{

    // }
    // .d-Deliver div{

    // }
    //活动
    .D-activity{
        display: flex;
    }
    .d-activity{
        flex: 1;
        .px2rem(font-size,30);
        .px2rem(margin,5);
        .px2rem(margin-left,50)
    }
    //颜色种类选择
    .detail-opt{
        .px2rem(margin-top,5);
        .px2rem(width,750);
    }
    .tit{
        color: #979797;
        .px2rem(font-size,30);
        .px2rem(margin,5);
    }
    .optColor{
        display: flex;
        flex-wrap: wrap;
        align-content: flex-start;
        .px2rem(width,720);
        text-align: center;
    }
    .optColorli{
        .px2rem(width,300);
        .px2rem(margin,10);
        .px2rem(line-height,70);
        .px2rem(height,70);
        .px2rem(font-size,35);
        box-sizing: border-box;
        border: 1px solid black;
        .px2rem(border-radius,10);
    }
    //送至
    .d-send{
        display: flex;
    }
    .D-send{
        flex: 1;
        .px2rem(font-size,30);
        .px2rem(margin,5);
        .px2rem(margin-left,50)
    }
    //参数
    .parameter{
        .px2rem(margin-top,10);
    }
    .parameter div{
        .px2rem(width,750);
        .px2rem(height,500);
    }
    //用户评论
    .evaluate{
        .px2rem(margin-top,10);
    }
    .user{
        display: flex;
        .px2rem(margin-top,10);
        .px2rem( height,150);
    }
    .user-img{
        min-width: 0;
        min-height: 0;
        overflow: hidden;
        flex: 1;
    }
    .user-img div{
        .px2rem( height,100);
        background: black;
    }
    .user-img p{
        .px2rem(font-size,25);
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }
    .user-comment{
        flex:4;
        border: #3F3F3F 1px solid;
        box-sizing:border-box;
    }
    //底部购物车客服
    .detail-buy{
        width: 100%;
        .px2rem(height,100);
        position: fixed;
        .px2rem(bottom,100);
        box-shadow: 0 0 5px black;
        display: flex;
        z-index: 9999;
        background: white;
    }
    .detail-buy div{
        text-align: center;
        .px2rem(margin-left,10);
        .px2rem(margin-bottom,5);
    }
    .detail-buy div:nth-child(1){
        .px2rem(font-size,35);
        flex:1;
    }
    .detail-buy div:nth-child(2){
        .px2rem(font-size,35);
        flex:1;
    }
    .detail-buy div:nth-child(3){
        .px2rem(margin,5);
        .px2rem(line-height,90);
        background: #ff4338;
        color: white;
        .px2rem(border-radius,5);
        flex:3;
    }
</style>
<script>
    export default {
        data(){
            return {
                Goodsltem:{
                    id:20,
                    name:'沙发',
                    introduction:'这真是一款好沙发',
                    price:999
                },
                dispose:['黑','白','灰']
            }
        },
        methods:{

        }
    }
</script>
